<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="60px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                      v-model="orgname"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="类型">
                  <el-select size="small" v-model="coverFeeType" clearable style="width: 100%;">
                    <el-option v-for="(item,index) in fuwulist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button type="primary" size="small" @click="gettablelist()">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div style="display: flex;justify-content: space-between;">
        <div>服务费维护</div>
        <div class="button"><el-button type="primary" size="small" @click="dialogVisible=true">新 增</el-button></div>
      </div>
     <!-- 表格区域 -->
     <div class="table">
       <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" >
        <el-table-column label="操作" align="center" >
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;" @click="mobel(row)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="el-icon-delete" style="color: red;cursor: pointer;" @click="del(row)"></i>
              </el-tooltip>
            </template>
          </el-table-column>
       </TableColumn>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="page.pageNo"
                :page-size="15"
                @current-change="gettablelist"
                :total="+totalCount">
          </el-pagination>
        </div>
        <!-- 新增/修改弹窗 -->
        <div class="dialog">
          <el-dialog
            :title="form.id?'修改服务费方案':'新增服务费方案'"
            :visible.sync="dialogVisible"
            width="35%">
            <div>
              <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="110px">
                <el-divider></el-divider>
                <el-col :span="24">
                  <el-form-item label="建筑群" prop="buildingId">
                    <el-select size="small" v-model="form.buildingId" style="width: 100%;" >
                      <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="服务费类型" prop="coverFeeType">
                    <el-select size="small" v-model="form.coverFeeType" style="width: 100%;">
                      <el-option v-for="(item,index) in fuwulist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="方案编号" prop="planNo">
                  <el-input v-model="form.planNo" size="small"></el-input>
                 </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="方案名称" prop="planName">
                  <el-input v-model="form.planName" size="small"></el-input>
                 </el-form-item>
                </el-col>
                <el-col :span="24">
                 <el-form-item label="单一服务费费率">
                  <el-input v-model="form.singleCoverFeeRate" size="small">
                    <span style="color: #000;" slot="suffix">元/kWh</span>
                  </el-input>
                 </el-form-item>
                </el-col>
              </el-form>
            </div>
            <span slot="footer" >
              <el-button  size="small" @click="sure">确定</el-button>
              <el-button type="primary" size="small" @click="quxiao">取消</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getzidianxialaapi} from '@/api/guidelines'
import TableColumn from '@/components/Table/index.vue'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import {gettablelistapi,postlistapi,dellistapi,putlistapi} from '@/api/prwpaid/configura/service'
// import {  } from '@/api/prwpaid/file-management/room';
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn
  },
  data() {
    return {
      dialogVisible:false,
      coverFeeType:'',
      orgname: '',
      fuwulist:[],
      qiyelist: [],
      tableData: [],
      tableConfig: [
      { label: '序号', type:'index' ,center:'center',width:'100'},
        { label: '建筑群', prop: 'buildingName' },
        { label: '方案编号', prop: 'planNo' ,center:'right'},
        { label: '方案名称', prop: 'planName' },
        { label: '服务费类型', prop: 'coverFeeType' },
      ],
      totalCount: '',
      page: {
        pageNo: 0,
        pageSize:15
      },
      form: {},
      rules: {
        buildingId: [
            { required: true, message: '请选择建筑群', trigger: 'blur' }
          ],
          coverFeeType: [
            { required: true, message: '请选择服务费类型', trigger: 'blur' }
          ],
          planNo: [
            { required: true, message: '请输入方案编号', trigger: 'blur' }
          ],
          planName: [
            { required: true, message: '请输入方案名称', trigger: 'blur' }
          ],
      }
    };
  },

  async mounted() {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.orgname=localbuildingId?localbuildingId:''
    }else{
      this.orgname=''
    }
    const yongneng = await getzidianxialaapi({ dictType: 'MBM_COVER_FEE_TYPE' })
    this.fuwulist = yongneng.data.list
    this.gettablelist()
  },

  methods: {
    // 企业下拉
     changeqiye(val) {
      localStorage.setItem('buildingId', val)
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.tabledata.loading=true
      const res = await gettablelistapi({coverFeeType:this.coverFeeType, buildingId: this.orgname, pageNo: this.page.pageNo - 1, pageSize: this.page.pageSize })
      this.tableData = res.data.list
      this.totalCount=res.data.totalCount
      this.$refs.tabledata.loading=false
    },
    // 弹窗确认
    async sure() {
      await this.$refs.form.validate()
      this.form.id?await putlistapi(this.form):
        await postlistapi(this.form)
        this.$message.success(this.form.id?'修改成功':'新增成功')
      this.gettablelist()
      this.quxiao()
    },
    // 弹窗取消
    quxiao() {
      this.$refs.form.resetFields()
      this.form={}
      this.dialogVisible = false
    },
    // 修改
    mobel(row) {
      this.dialogVisible = true
      this.form={...row}
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await dellistapi({id:row.id})
          this.$message.success('删除成功')
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
};
</script>

<style lang="scss" scoped>
 .option{
  padding-left:10px;
 }
 .bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    padding:20px;
    height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .button{
      text-align: right;
      margin-bottom: 10px;
    }
    .table{
      height: 88%;
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
    .dialog{
      .buttons{
        width: 60px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 3px;
      }
      .sures{
        margin-right: 10px;
        background-color: #3b8eea;
      color: #fff;
      }
    }
  }
 }
 ::v-deep .el-form-item__error{
  padding-top: 0 !important;
}
::v-deep .el-col-24{
  margin-bottom: 5px;
}
::v-deep .el-form-item__error{
  font-size: 10px;
}
</style>